<script setup>
import { ref, reactive } from 'vue'

// 系统设置表单
const settingsForm = reactive({
  // 存储设置
  storage: {
    type: 'local', // local, oss, cos, s3
    path: '/uploads',
    maxSize: 10, // MB
    allowedTypes: ['jpg', 'jpeg', 'png', 'gif', 'webp']
  },
  
  // 图片处理设置
  imageProcess: {
    enableCompress: true,
    compressQuality: 80,
    enableWatermark: false,
    watermarkText: '图床系统',
    watermarkPosition: 'bottomRight',
    watermarkOpacity: 50,
    enableResize: false,
    maxWidth: 1920,
    maxHeight: 1080
  },
  
  // 访问控制设置
  access: {
    enableAuth: true,
    accessControl: 'private', // public, private
    enableReferCheck: false,
    allowedRefers: '',
    enableCors: true,
    corsOrigins: '*'
  },
  
  // 系统设置
  system: {
    siteName: '图床系统',
    siteDesc: '简单易用的图片托管服务',
    adminEmail: 'admin@example.com',
    cleanupDays: 0 // 0表示永不自动清理
  }
})

// 开关存储类型面板
const activePanel = ref('storage')

// 表单提交
const saving = ref(false)
const saveSettings = () => {
  saving.value = true
  
  // 模拟API请求
  setTimeout(() => {
    saving.value = false
    alert('设置保存成功！')
  }, 1000)
}

// 重置设置
const resetSettings = () => {
  if (confirm('确定要重置所有设置吗？这将恢复系统默认设置。')) {
    // 重置表单
    settingsForm.storage.type = 'local'
    settingsForm.storage.path = '/uploads'
    settingsForm.storage.maxSize = 10
    settingsForm.storage.allowedTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp']
    
    settingsForm.imageProcess.enableCompress = true
    settingsForm.imageProcess.compressQuality = 80
    settingsForm.imageProcess.enableWatermark = false
    settingsForm.imageProcess.watermarkText = '图床系统'
    settingsForm.imageProcess.watermarkPosition = 'bottomRight'
    settingsForm.imageProcess.watermarkOpacity = 50
    settingsForm.imageProcess.enableResize = false
    settingsForm.imageProcess.maxWidth = 1920
    settingsForm.imageProcess.maxHeight = 1080
    
    settingsForm.access.enableAuth = true
    settingsForm.access.accessControl = 'private'
    settingsForm.access.enableReferCheck = false
    settingsForm.access.allowedRefers = ''
    settingsForm.access.enableCors = true
    settingsForm.access.corsOrigins = '*'
    
    settingsForm.system.siteName = '图床系统'
    settingsForm.system.siteDesc = '简单易用的图片托管服务'
    settingsForm.system.adminEmail = 'admin@example.com'
    settingsForm.system.cleanupDays = 0
  }
}
</script>

<template>
  <div class="settings-container">
    <div class="settings-header">
      <h2>系统设置</h2>
      <p class="desc">配置图床系统的基本参数和功能</p>
    </div>
    
    <div class="settings-content">
      <!-- 设置菜单 -->
      <div class="settings-menu">
        <div 
          class="menu-item" 
          :class="{ active: activePanel === 'storage' }"
          @click="activePanel = 'storage'"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21.5 12H16c-.7 2-2 3-4 3s-3.3-1-4-3H2.5"></path>
            <path d="M5.5 5.1L2 12v6c0 1.1.9 2 2 2h16a2 2 0 002-2v-6l-3.4-6.9A2 2 0 0016.8 4H7.2a2 2 0 00-1.8 1.1z"></path>
          </svg>
          <span>存储设置</span>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ active: activePanel === 'imageProcess' }"
          @click="activePanel = 'imageProcess'"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
            <circle cx="8.5" cy="8.5" r="1.5"></circle>
            <polyline points="21 15 16 10 5 21"></polyline>
          </svg>
          <span>图片处理</span>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ active: activePanel === 'access' }"
          @click="activePanel = 'access'"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
            <path d="M7 11V7a5 5 0 0110 0v4"></path>
          </svg>
          <span>访问控制</span>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ active: activePanel === 'system' }"
          @click="activePanel = 'system'"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="3"></circle>
            <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"></path>
          </svg>
          <span>系统设置</span>
        </div>
      </div>
      
      <!-- 设置表单 -->
      <div class="settings-form">
        <!-- 存储设置 -->
        <div class="settings-panel" v-show="activePanel === 'storage'">
          <h3>存储设置</h3>
          
          <div class="form-group">
            <label>存储类型</label>
            <div class="storage-type-options">
              <div class="radio-item">
                <input type="radio" id="storage-local" v-model="settingsForm.storage.type" value="local">
                <label for="storage-local">本地存储</label>
              </div>
              <div class="radio-item">
                <input type="radio" id="storage-oss" v-model="settingsForm.storage.type" value="oss">
                <label for="storage-oss">阿里云 OSS</label>
              </div>
              <div class="radio-item">
                <input type="radio" id="storage-cos" v-model="settingsForm.storage.type" value="cos">
                <label for="storage-cos">腾讯云 COS</label>
              </div>
              <div class="radio-item">
                <input type="radio" id="storage-s3" v-model="settingsForm.storage.type" value="s3">
                <label for="storage-s3">Amazon S3</label>
              </div>
            </div>
          </div>
          
          <div class="form-group" v-if="settingsForm.storage.type === 'local'">
            <label for="storage-path">存储路径</label>
            <input type="text" id="storage-path" v-model="settingsForm.storage.path">
            <p class="form-tip">本地存储的路径，必须有写入权限</p>
          </div>
          
          <div class="form-group" v-if="settingsForm.storage.type !== 'local'">
            <label for="storage-access-key">Access Key</label>
            <input type="text" id="storage-access-key" placeholder="请输入 Access Key">
          </div>
          
          <div class="form-group" v-if="settingsForm.storage.type !== 'local'">
            <label for="storage-secret-key">Secret Key</label>
            <input type="password" id="storage-secret-key" placeholder="请输入 Secret Key">
          </div>
          
          <div class="form-group" v-if="settingsForm.storage.type !== 'local'">
            <label for="storage-bucket">Bucket 名称</label>
            <input type="text" id="storage-bucket" placeholder="请输入 Bucket 名称">
          </div>
          
          <div class="form-group" v-if="settingsForm.storage.type !== 'local'">
            <label for="storage-region">区域/Region</label>
            <input type="text" id="storage-region" placeholder="请输入区域或 Region">
          </div>
          
          <div class="form-group">
            <label for="storage-max-size">最大文件大小 (MB)</label>
            <input type="number" id="storage-max-size" v-model="settingsForm.storage.maxSize">
          </div>
          
          <div class="form-group">
            <label>允许的文件类型</label>
            <div class="checkbox-group">
              <div class="checkbox-item" v-for="type in ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp']" :key="type">
                <input type="checkbox" :id="`type-${type}`" :value="type" v-model="settingsForm.storage.allowedTypes">
                <label :for="`type-${type}`">{{ type.toUpperCase() }}</label>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 图片处理设置 -->
        <div class="settings-panel" v-show="activePanel === 'imageProcess'">
          <h3>图片处理设置</h3>
          
          <div class="form-group">
            <div class="switch-item">
              <label for="enable-compress">启用图片压缩</label>
              <label class="switch">
                <input type="checkbox" id="enable-compress" v-model="settingsForm.imageProcess.enableCompress">
                <span class="slider"></span>
              </label>
            </div>
            <p class="form-tip">上传后自动压缩图片以节省空间</p>
          </div>
          
          <div class="form-group" v-if="settingsForm.imageProcess.enableCompress">
            <label for="compress-quality">压缩质量 (1-100)</label>
            <input type="range" id="compress-quality" v-model="settingsForm.imageProcess.compressQuality" min="1" max="100">
            <div class="range-value">{{ settingsForm.imageProcess.compressQuality }}</div>
            <p class="form-tip">值越高，图片质量越好，但文件大小也越大</p>
          </div>
          
          <div class="form-group">
            <div class="switch-item">
              <label for="enable-watermark">启用水印</label>
              <label class="switch">
                <input type="checkbox" id="enable-watermark" v-model="settingsForm.imageProcess.enableWatermark">
                <span class="slider"></span>
              </label>
            </div>
          </div>
          
          <div class="form-group" v-if="settingsForm.imageProcess.enableWatermark">
            <label for="watermark-text">水印文字</label>
            <input type="text" id="watermark-text" v-model="settingsForm.imageProcess.watermarkText">
          </div>
          
          <div class="form-group" v-if="settingsForm.imageProcess.enableWatermark">
            <label for="watermark-position">水印位置</label>
            <select id="watermark-position" v-model="settingsForm.imageProcess.watermarkPosition">
              <option value="topLeft">左上角</option>
              <option value="topRight">右上角</option>
              <option value="bottomLeft">左下角</option>
              <option value="bottomRight">右下角</option>
              <option value="center">中心</option>
            </select>
          </div>
          
          <div class="form-group" v-if="settingsForm.imageProcess.enableWatermark">
            <label for="watermark-opacity">水印透明度 (1-100)</label>
            <input type="range" id="watermark-opacity" v-model="settingsForm.imageProcess.watermarkOpacity" min="1" max="100">
            <div class="range-value">{{ settingsForm.imageProcess.watermarkOpacity }}</div>
          </div>
          
          <div class="form-group">
            <div class="switch-item">
              <label for="enable-resize">启用图片缩放</label>
              <label class="switch">
                <input type="checkbox" id="enable-resize" v-model="settingsForm.imageProcess.enableResize">
                <span class="slider"></span>
              </label>
            </div>
            <p class="form-tip">上传时自动调整图片大小</p>
          </div>
          
          <div class="form-group" v-if="settingsForm.imageProcess.enableResize">
            <label for="max-width">最大宽度 (像素)</label>
            <input type="number" id="max-width" v-model="settingsForm.imageProcess.maxWidth">
          </div>
          
          <div class="form-group" v-if="settingsForm.imageProcess.enableResize">
            <label for="max-height">最大高度 (像素)</label>
            <input type="number" id="max-height" v-model="settingsForm.imageProcess.maxHeight">
          </div>
        </div>
        
        <!-- 访问控制设置 -->
        <div class="settings-panel" v-show="activePanel === 'access'">
          <h3>访问控制设置</h3>
          
          <div class="form-group">
            <div class="switch-item">
              <label for="enable-auth">启用身份验证</label>
              <label class="switch">
                <input type="checkbox" id="enable-auth" v-model="settingsForm.access.enableAuth">
                <span class="slider"></span>
              </label>
            </div>
            <p class="form-tip">开启后，需要登录才能上传和管理图片</p>
          </div>
          
          <div class="form-group">
            <label>访问控制</label>
            <div class="radio-group">
              <div class="radio-item">
                <input type="radio" id="access-public" v-model="settingsForm.access.accessControl" value="public">
                <label for="access-public">公开 (所有人可访问)</label>
              </div>
              <div class="radio-item">
                <input type="radio" id="access-private" v-model="settingsForm.access.accessControl" value="private">
                <label for="access-private">私有 (仅授权用户可访问)</label>
              </div>
            </div>
          </div>
          
          <div class="form-group">
            <div class="switch-item">
              <label for="enable-refer-check">启用防盗链</label>
              <label class="switch">
                <input type="checkbox" id="enable-refer-check" v-model="settingsForm.access.enableReferCheck">
                <span class="slider"></span>
              </label>
            </div>
            <p class="form-tip">限制图片只能在指定网站中显示</p>
          </div>
          
          <div class="form-group" v-if="settingsForm.access.enableReferCheck">
            <label for="allowed-refers">允许的域名</label>
            <textarea id="allowed-refers" v-model="settingsForm.access.allowedRefers" placeholder="每行一个域名，例如：example.com"></textarea>
            <p class="form-tip">留空表示允许所有域名</p>
          </div>
          
          <div class="form-group">
            <div class="switch-item">
              <label for="enable-cors">启用跨域访问 (CORS)</label>
              <label class="switch">
                <input type="checkbox" id="enable-cors" v-model="settingsForm.access.enableCors">
                <span class="slider"></span>
              </label>
            </div>
          </div>
          
          <div class="form-group" v-if="settingsForm.access.enableCors">
            <label for="cors-origins">允许的源 (Origins)</label>
            <input type="text" id="cors-origins" v-model="settingsForm.access.corsOrigins">
            <p class="form-tip">使用 * 表示允许所有源，或输入特定域名</p>
          </div>
        </div>
        
        <!-- 系统设置 -->
        <div class="settings-panel" v-show="activePanel === 'system'">
          <h3>系统设置</h3>
          
          <div class="form-group">
            <label for="site-name">网站名称</label>
            <input type="text" id="site-name" v-model="settingsForm.system.siteName">
          </div>
          
          <div class="form-group">
            <label for="site-desc">网站描述</label>
            <textarea id="site-desc" v-model="settingsForm.system.siteDesc"></textarea>
          </div>
          
          <div class="form-group">
            <label for="admin-email">管理员邮箱</label>
            <input type="email" id="admin-email" v-model="settingsForm.system.adminEmail">
          </div>
          
          <div class="form-group">
            <label for="cleanup-days">图片自动清理时间 (天)</label>
            <input type="number" id="cleanup-days" v-model="settingsForm.system.cleanupDays">
            <p class="form-tip">设置为 0 表示永不自动清理</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="settings-actions">
      <button class="reset-btn" @click="resetSettings">恢复默认设置</button>
      <button class="save-btn" :disabled="saving" @click="saveSettings">
        <span v-if="saving">保存中...</span>
        <span v-else>保存设置</span>
      </button>
    </div>
  </div>
</template>

<style scoped>
.settings-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.settings-header {
  margin-bottom: 24px;
}

.settings-header h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 500;
}

.desc {
  color: #606266;
  margin: 0;
}

.settings-content {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.settings-menu {
  width: 200px;
  background-color: #f8f8f8;
  border-right: 1px solid #eaeaea;
  padding: 20px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.menu-item:hover {
  background-color: #f1f1f1;
}

.menu-item.active {
  background-color: #ecf5ff;
  color: #409EFF;
  border-right: 2px solid #409EFF;
}

.settings-form {
  flex: 1;
  padding: 20px;
}

.settings-panel h3 {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #606266;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #409EFF;
}

.form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
  margin-bottom: 0;
}

.storage-type-options,
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.radio-item,
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.switch-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dcdfe6;
  transition: .4s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #409EFF;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

.range-value {
  display: inline-block;
  margin-left: 8px;
  font-size: 14px;
  color: #606266;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.save-btn,
.reset-btn {
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.save-btn {
  background-color: #409EFF;
  color: white;
  border: none;
}

.save-btn:hover {
  background-color: #66b1ff;
}

.save-btn:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

.reset-btn {
  background-color: white;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.reset-btn:hover {
  border-color: #c6e2ff;
  color: #409EFF;
}
</style> 